<template>
  <drag-dialog title="接口配置" v-model="visible">
    <el-collapse v-model="active">
      <el-collapse-item title="接口配置" name="0">
        <el-form label-position="right" label-width="100px" label-suffix=":">
          <el-form-item label="接口地址">
            <el-input v-model="localData.interfaceUrl" placeholder="请输入接口地址" style="width: 500px" />
          </el-form-item>
          <el-form-item label="请求方式">
            <el-radio-group v-model="localData.method">
              <el-radio-button label="POST" value="post" />
              <el-radio-button label="GET" value="get" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请求体类型">
            <el-radio-group v-model="localData.contentType">
              <el-radio-button label="FormData" value="FormData" />
              <el-radio-button label="RawJSON" value="RawJSON" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="入参绑定" name="1">
        <template #title>
          <span>入参绑定</span>
          <span class="tips">tips: 指定调用接口时需要传入的流程参数</span>
        </template>
        <text-add-button @click="addInParam" />
        <el-table :data="localData.params" border>
          <el-table-column align="center" prop="name" label="参数名称">
            <template #default="scope">
              <el-input v-model="scope.row.name" placeholder="请输入参数名称" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="desc" label="参数描述">
            <template #default="scope">
              <el-input v-model="scope.row.desc" placeholder="请输入参数描述" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="from" label="从流程变量读取">
            <template #default="scope">
              <el-select v-model="scope.row.from" clearable>
                <el-option v-for="opt in globalVariables" :key="opt.id" :label="opt.name" :value="opt.id" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template #default="scope">
              <text-delete-button @click="deleteInParam(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="出参绑定" name="2">
        <template #title>
          <span>出参绑定</span>
          <span class="tips">tips: 将接口返回的数据保存到指定的流程参数中</span>
        </template>
        <text-add-button @click="addOutParam" />
        <el-table :data="localData.outputVariables" border>
          <el-table-column align="center" prop="to" label="输出到流程变量">
            <template #default="scope">
              <el-select v-model="scope.row.to" clearable>
                <el-option v-for="opt in globalVariables" :key="opt.id" :label="opt.name" :value="opt.id" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="jsonpath" label="JSONPath表达式">
            <template #default="scope">
              <el-input v-model="scope.row.jsonpath" placeholder="请输入JSONPath表达式" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template #default="scope">
              <text-delete-button @click="deleteOutParam(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="cancel" />
    </template>
  </drag-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { getGlobalVariablesValue } from '../../bo-utils/globalVariablesUtil';
import { cloneDeep } from 'lodash-es';

export default defineComponent({
  name: 'ServiceTaskSetting',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      localData: {},
      globalVariables: [], // 流程全局变量,
      active: ['0']
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.visible = newVal;
        if (newVal) {
          this.localData = cloneDeep(this.data);
        }
      },
      immediate: true
    },
    visible: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      console.log(this.getActive);
      this.globalVariables = getGlobalVariablesValue(this.getActive.businessObject.$parent);
    },
    addInParam() {
      this.localData.params.push({ name: '', desc: '', from: '' });
    },
    deleteInParam(index: number) {
      this.localData.params.splice(index, 1);
    },
    addOutParam() {
      this.localData.outputVariables.push({ to: '', jsonpath: '' });
    },
    deleteOutParam(index: number) {
      this.localData.outputVariables.splice(index, 1);
    },
    submit() {
      if(!this.localData.interfaceUrl){
        this.msgError('请配置接口地址！')
        return
      }
      this.$emit('submit', this.localData);
      this.cancel();
    },
    cancel() {
      this.visible = false;
    }
  }
});
</script>

<style lang="scss" scoped>
.tips {
  margin-left: 40px;
  color: #7f7f7f;
}
</style>